<template>
  <div class="g-footer">
    <div class="footer-inner clearfix">
      <div class="clearfix">
        <div class="footer-left fl clearfix">
          <div class="matter-list">
            <h3>常见问题</h3>
            <p><a href="#" class="">常见问题</a></p>
            <p><a href="#" class="">联系我们</a></p>
          </div>

          <div class="matter-list">
            <h3>新手指南</h3>
            <p><a href="#" class="">用户注册流程</a></p>
            <p><a href="#" class="">用户登录流程</a></p>
          </div>

          <div class="matter-list">
            <h3>购买流程</h3>
            <p><a href="#" class="">直接购买流程</a></p>
            <p><a href="#" class="">加购物车购买</a></p>
            <p><a href="#" class="">网上支付流程</a></p>
          </div>

          <div class="matter-list">
            <h3>极鲜规则</h3>
            <p><a href="#" class="">隐私声明</a></p>
            <p><a href="#" class="">极鲜规则</a></p>
          </div>

          <div class="matter-list">
            <h3>配送信息</h3>
            <p><a href="#" class="">关于发票</a></p>
          </div>
        </div>

        <div class="footer-right fr">
          <h3>服务热线：400-628-1818</h3>
          <div class="platform">
            <span>
              <i class="fa fa-desktop"></i>
            </span>

            <span>
              <i class="fa fa-wechat ic-on" @mouseover="mup1" @mouseout="mup4"></i>
              <img src="../../assets/image/code-wechat.3ec963c.png">
            </span>

            <span>
              <i class="fa fa-apple ic-on" @mouseover="mup2" @mouseout="mup5"></i>
              <img src="../../assets/image/code-app.baee684.png">
            </span>

            <span class="last">
              <i class="fa fa-android ic-on" @mouseover="mup3" @mouseout="mup6"></i>
              <img src="../../assets/image/code-app.baee684.png">
            </span>
          </div>
        </div>
      </div>
      <div class="copyright clearfix">
        <p class="fl">版权所有©️上海极鲜网电子商务有限公司</p>
        <p class="fr">网站备案/许可证号：沪ICP备15003132号</p>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "Footer",
      data(){
          return {

          }
      },
      methods:{
        mup1:function (ev) {
          let icOn = document.getElementsByClassName("ic-on")[0];
          icOn.nextElementSibling.style.display = "block";
        },
        mup2:function () {
          let icOn = document.getElementsByClassName("ic-on")[1];
          icOn.nextElementSibling.style.display = "block"
        },
        mup3:function () {
          let icOn = document.getElementsByClassName("ic-on")[2];
          icOn.nextElementSibling.style.display = "block"
        },
        mup4:function () {
          let icOn = document.getElementsByClassName("ic-on")[0];
          icOn.nextElementSibling.style.display = "none"
        },
        mup5:function () {
          let icOn = document.getElementsByClassName("ic-on")[1];
          icOn.nextElementSibling.style.display = "none"
        },
        mup6:function () {
          let icOn = document.getElementsByClassName("ic-on")[2];
          icOn.nextElementSibling.style.display = "none"
        },
      },
      created(){}

    }
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  ul li {
    list-style: none;
  }

  a {
    text-decoration: none;
  }

  .g-footer {
    background-color: #fcfcfc;
    border-top: 1px solid hsla(0,0%,85%,.5);
    margin-top: 30px;
  }

  .g-footer .footer-inner {
    width: 1200px;
    margin: 35px auto 0;
  }

  .g-footer .footer-left {
    width: 880px;
  }
  .fl {
    float: left;
  }

  .g-footer .matter-list {
    float: left;
    width: 115px;
    text-align: left;
  }

  .g-footer .matter-list h3 {
    color: #000;
    opacity: .8;
    margin-bottom: 16px;
    font-size: 12px;
  }

  .g-footer .matter-list a {
    color: #000;
    opacity: .5;
    font-size: 12px;
  }

  .clearfix:after {
    display: block;
    clear: both;
    content: " ";
    visibility: hidden;
    height: 0;
  }

  .g-footer .footer-right {
    width: 320px;
    text-align: right ;
  }
  .fr {
    float: right;
  }

  .g-footer .footer-right .last {
    margin-right: 0;
  }

  .g-footer .footer-right h3 {
    color: #333;
    font-size: 18px;
    font-weight: normal;
  }

  .g-footer .platform {
    margin-top: 40px;
  }

  .g-footer .platform span {
    display: inline-block;
    margin-right: 35px;
    position: relative;
  }

  .g-footer .platform i {
    color: #333;
    opacity: .5;
    font-size: 24px;
  }

  .g-footer .platform i:hover {
    color: #000;
    opacity: 1;
  }

  .icon-desk:before {
    content: "\E921";
  }

  .g-footer .platform span img {
    position: absolute;
    left: -110px;
    top: 50%;
    margin-top: -50px;
    display: none;
  }

  .g-footer .copyright {
    margin-top: 38px;
    border-top: 1px solid #dbdbdb;
  }

  .g-footer .copyright p {
    color: #000;
    opacity: .5;
    font-size: 12px;
    line-height: 72px;
  }

</style>
